<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>积分后台管理</title>
    <link rel="icon" href="img/lei_huiyuan_on.png"  size="16x16" />
</head>
<body>
<div id="top">

</div>


<div class="body content"  id="app">
			<div id="left">

			</div>

    <div class="right">

        <div class="liebie_title style_hei_16">
            <img src="img/xiugai.png">会员列表
        </div>

        <div class="bottom">

            <div class="chaxun">
                <div class="chaxun_list">
					手机号码：
                    <input type="text" name="mobile" v-model="mobile" value="" placeholder="" style="padding-left: 10px;">

                </div>

                <div class="chaxun_anniu style_bai_14" @click="chaxun()">查询</div>
            </div>
           <div class="tab_caozuo ">
               <div style="float:left;  margin-right:1rem;display: flex;align-items: center;" class="table_quanxuan">
                   <input type="checkbox" name="quanxuan" id="quanxuan" style="width:14px; height:14px;"> 全选
               </div>
               <div class="filter-box">
                   <div class="filter-text">
                       <input class="filter-title" type="text" readonly placeholder="操作方式"/>
                       <i class="icon icon-filter-arrow"></i>
                   </div>
                   <select name="filter">
                       <option value=""></option>
                       <option value="del">删除</option>
                   </select>
               </div>
               <input type="submit" name="Submit2" value="确定操作" class="queding style_bai_14">
           </div>

            <!--------列表开始-------->

            <table width="100%" align="center" class="tab_top baoguo " border="0" cellspacing="0" cellpadding="0" >
                <tr style="background-color: #FAFAFA;">
                    <td height="40" align="center" class="" width="50px">选择</td>
                    <td align="center" class="" width="80px">排序</td>
                    <td align="left" class="">手机号</td>
                    <td align="left" class="">密码</td>
                    <td align="left" class="">积分</td>
					<td align="left" class="">添加时间</td>
                    <td align="center" class="" width="280px">操作</td>
                </tr>   
				  
			    <tr align="center" v-for="(item,index) in list"  v-cloak>
			        <td height="40" class=""><input type="checkbox" name="check" class="tab_xuanze" :value="item.id"></td>
			        <td align="center" class="">{{index+1}}</td>
			        <td align="left" class="">{{item.username}}</td>
			    	<td align="left" class="">{{item.password}}</td>
			    	<td align="left" class="">{{item.totalPoints}}</td>
			        <td align="left" class="">{{item.created_at}}</td>
			        <td align="center" class=" style_lv_9 caozuo">
			    		<div class="dd_caozuo style_hong_14">
							<p  @click='tan_bianji(item.id)'>积分明细</p>
							<p  @click="tan_change_jifen(item)">修改积分</p>
			    		</div>
			    		
			    	</td>
			    </tr>		   
            </table>


            <!--------分页列表开始-------->
			<ul class="pagination" v-cloak>
				<li @click="xuanye(item)" v-for="item in pageCount" :class="item==page?'pagination_on':''">{{item}}</li>
			</ul>

        </div>
    </div>
</div>


<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/selectFilter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/get.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fengzhuang.js"></script>
<script src="js/gong.js"></script>
<script src="js/vue.js"></script>
<script>
	var app = new Vue({
	    el: '#app',
	    data:{
	        list :[],
			page:1,
			limit:10,
			pageCount:0,
			jifen_page:1,
			jifen_limit:100,
			mobile:''
	    },
		mounted(){
			this.get_list()
		},
		methods:{
			xuanye(page){
				this.page=page
				this.get_list()
			},
			get_list(){
			    $.ajaxDirect("/api/getUserList",'get',{
			    	'page':this.page,
			    	'limit':this.limit,
					username:this.mobile
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  this.list=obj.users
							  this.pageCount=Math.ceil(Number(obj.totalCount)/this.limit)

			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			},
			chaxun() {
				
				this.get_list()
			},
			tan_bianji(username){
				var html=`
				<div class="tan_haobianji">
					<div class="tan_haobianji_title style_hei_20">
						<span></span><span>积分明细</span><img src="img/close.png" alt="" onclick="layer.closeAll()">
					</div>
					<div class="tan_haobianji_box">
						<div class="jifen_list">
							<p>说明</p>
							<p>积分</p>
							<p>时间</p>
						</div>
						
					
				`
				$.ajaxDirect("/api/getPointRecordsByUserIdAndPage",'get',{
					'page':this.jifen_page,
					'limit':this.jifen_limit,
					'userId':username
				},
				 (obj)=> {
						  if(obj.code==200){
							  
							  $.each(obj.records, function (index, value) {
								  
								  html+=`
								  <div class="jifen_list">
								  <p>	${value.reason}</p>
								  	<p>	${value.points}</p>
								  	<p>${value.created_at}</p>
								  </div>
								  `
								  
							  // this.pageCount=Math.floor(Number(obj.totalCount)/this.limit)
				              }) 
							  html+=`
							  </div>
							  	<div class="tan_haobianji_bottom">
							  		
							  		<button class="style_bai_14 no_border" onclick="layer.closeAll()">关闭</button>
							  	</div>
							  	
							  </div>
							  `
							  layer.open({
							      type: 1,
							      title: false,
							      closeBtn: 0,
							      shadeClose: true,
							      skin: 'yourclass',
							      content: html,
							      area: '500',
							  });
						  }
				},
				(err)=> {
				        //发送失败
				})
				
				
				
			},
			// 修改账号
			tan_change(){
				var html=`
				<div class="tan_haobianji">
					<div class="tan_haobianji_title style_hei_20">
						<span></span><span>修改账号</span><img src="img/close.png" alt="" onclick="layer.closeAll()">
					</div>
					<div class="tan_haobianji_box" style="margin-top: 0;">
						
						<div class="tan_haobianji_list">
							<p>手机号码：</p>13621501608	
						</div>
						<div class="tan_haobianji_list">
							<p>密码：</p><input type="text"  name="mima">
						</div>
						<div class="tan_haobianji_list">
							<p>再次输入密码：</p><input type="text"  name="agamima">
						</div>
						
					</div>
					<div class="tan_haobianji_bottom">
						<button class="style_bai_14" @click="change()">确认修改</button>
						<button class="style_bai_14" @click="layer.closeAll()">取消</button>
					</div>
					
				</div>
				`
				layer.open({
				    type: 1,
				    title: false,
				    closeBtn: 0,
				    shadeClose: true,
				    skin: 'yourclass',
				    content: html,
				    area: '500',
				});
			},
			change(){
				var mobile = $("input[name='shoiji']").val()
				var mima = $("input[name='mima']").val()
				var agamima = $("input[name='agamima']").val()
				console.log(mobile,mima,agamima)
			},
			// 修改账号
			 tan_change_jifen(item){
				var html=`
				<div class="tan_haobianji">
					<div class="tan_haobianji_title style_hei_20">
						<span></span><span>修改积分</span><img src="img/close.png" alt="" onclick="layer.closeAll()">
					</div>
					<div class="tan_haobianji_box" style="margin-top: 0;">
						
						<div class="tan_haobianji_list">
							<p>手机号码：</p>${item.username}	
						</div>
						<div class="tan_haobianji_list">
							<p>积分：</p><input type="text"  name="jifen" value="${item.points}">
						</div>
						
					</div>
					<div class="tan_haobianji_bottom">
						<button class="style_bai_14" onclick="changejifen(${item.userId})">确认修改</button>
						<button class="style_bai_14" onclick="layer.closeAll()">取消</button>
					</div>
					
				</div>
				`
				layer.open({
				    type: 1,
				    title: false,
				    closeBtn: 0,
				    shadeClose: true,
				    skin: 'yourclass',
				    content: html,
				    area: '500',
				});
			}
			
	
		}
	})	
</script>

<script type="text/javascript">
    var state = 0;
    laydate.render({
        elem: '#riqi',
        range: true
    });
     $('.filter-box').selectFilter();
	 function changejifen(userId){
		var jifen = $("input[name='jifen']").val()
		$.ajaxDirect("/api/updateUserPoints",'post',{
			'userId':userId,
			'newPoints':jifen
		},
		 (obj)=> {
				  if(obj.code==200){
					  
					  layer.msg(obj.message)
					  setTimeout(()=>{
							history.go(0);
					  },500)
		
				  }
		},
		(err)=> {
				//发送失败
		})
	}

	function bianji(){
		var mobile = $("input[name='shoiji']").val()
		var mima = $("input[name='mima']").val()
		var dengji = $('select[name="filter_dengji"]').val();
		console.log(mobile,mima,dengji)
	}
	



	// 删除账号
	function tan_del(){
		var html=`
		<div class="tan_haobianji">
			<div class="tan_haobianji_title style_hei_20">
				<span></span><span>删除账号</span><img src="img/close.png" alt="" onclick="layer.closeAll()">
			</div>
			<div class="tan_haobianji_box" style="margin-top: 0;">
				<p class="style_hong_14 tan_haobianji_tishi">删除账号需要密码才可以操作！！</p>
				<div class="tan_haobianji_list">
					<p>手机号码：</p><input type="text" name="shoiji">
				</div>
				<div class="tan_haobianji_list">
					<p>密码：</p><input type="text"  name="mima">
				</div>
				
			</div>
			<div class="tan_haobianji_bottom">
				<button class="style_bai_14" onclick="del()">确认删除</button>
				<button class="style_bai_14" onclick="layer.closeAll()">取消</button>
			</div>
			
		</div>
		`
		layer.open({
		    type: 1,
		    title: false,
		    closeBtn: 0,
		    shadeClose: true,
		    skin: 'yourclass',
		    content: html,
		    area: '500',
		});
	}
	function del(){
		var mobile = $("input[name='shoiji']").val()
		var mima = $("input[name='mima']").val()
		console.log(mobile,mima)
	}

    $('.queding').click(function () {

        var str = [];
        $("input[name='check']:checked").each(function (index, item) {
            str.push($(this).val())
        });
		var menu = $('select[name="filter"]').val();

        console.log(str)
    })
</script>


<script type="text/javascript">
    $('#quanxuan').click(function () {
        var flag = $(this).is(":checked");
        console.log(flag)
        $(":checkbox[name='check']").prop("checked", flag);
    })
    $('.tab_xuanze').click(function () {
        var flag = true;
        var tbodyO = $('.tab_xuanze')

        for (var j = 0; j < tbodyO.length; j++) {
            //只要存在没被勾选的复选框
            if (!tbodyO[j].checked) {
                //判断标识为假，不影响全选框
                flag = false;
                break;
            }
        }
        $('#quanxuan').prop("checked", flag)
    })
</script>
</body>
</html>
